<template>
  <div class="icon-tools">
    <div class="edit-icon flex flex-center" :class="{'selected': edit}" v-if="type === 'home' && !keepOut" @click="collapsedEdit">
      <c-icon icon="FormOutlined"></c-icon>
    </div>
    <div class="edit-icon flex flex-center" v-if="type === 'home' && !keepOut" @click="goTo('upload')">
      <c-icon icon="CloudUploadOutlined"></c-icon>
    </div>
    <div class="edit-icon flex flex-center" v-if="type !== 'home'" @click="goTo('home')">
      <c-icon icon="HomeOutlined"></c-icon>
    </div>
    <div class="edit-icon flex flex-center" v-if="backTop">
      <c-icon icon="VerticalAlignTopOutlined"></c-icon>
    </div>
  </div>
</template>
<script setup>
import { ref, toRefs } from 'vue'

const props = defineProps({
  type: String,
  edit: Boolean,
  keepOut: Boolean
})
const emit = defineEmits(['back', 'edit'])

const backTop = ref(false)
const { type, edit } = toRefs(props)
const collapsedEdit = () => {
  emit('edit')
}
const goTo = (val) => {
  emit('back', val)
}
</script>
<style lang="less" scoped>
.icon-tools {
  position: fixed;
  bottom: 300px;
  right: 8px;

  .edit-icon {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color: #f8f8f8;
    margin-bottom: 10px;
    &.selected {
      background-color: #d6f9ff;
    }
  }

}
</style>
